<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="ps/index.css">
    <title>在线抠图工具,简单ps</title>
    <script src="ps/ui.js"></script>
    <script src="ps/ps.js"></script>
</head>
<body>
    <div class="box">
        <div class="menu">
            <span class='menubtn' href="javascript:;" title="打开图片"><img width="35%" src="imgs/folder.png" alt=""></span>
            <span class='menubtn' href="javascript:;" class="none_btn" title="保存"><img width="30%" src="imgs/save.png" alt=""></span>
            <span class='menubtn' href="javascript:;" title="取消选择"><img width="25%" src="imgs/Pointer.png" alt=""></span>
            <span class='menubtn' href="javascript:;" title="删除选择"><img width="35%" src="imgs/emptytrash.png" alt=""></span>
            <span class='menubtn' href="javascript:;" title="色彩平衡"><img width="30%" src="imgs/Color.png" alt=""></span>
            <span class='menubtn' href="javascript:;" class="none_btn" title="裁剪"><img width="35%" src="imgs/clipping.png" alt=""></span>
            <span class='menubtn' href="javascript:;" title="按住空格,鼠标移动画布"><img width="35%" src="imgs/move.svg" alt=""></span>
            <span class='menubtn' href="javascript:;" title="重置画布位置"><img width="35%" src="imgs/Restore.png" alt=""></span>
            <span class='menubtn' href="javascript:;" title="画笔"><img width="25%" src="imgs/paintbrush.svg" alt=""></span>
            <span class='menubtn' href="javascript:;" title="擦除"><img width="50%" src="imgs/eraser.svg" alt=""></span>
             <!-- 帮助 -->
            <span class='menubtn' title="帮助" href="javasctipt:void(0);"><img width="35%" src="imgs/help.png" alt="帮助"></span>
            <br>
            <hr>
            <span>容差</span>
            <br>
            <input type="number" value="0" max="100" min="0">
            <br>
            <span>笔刷大小</span>
            <br>
            <input type="number" value="10" min="1" max="1000">
            <br>
            <span>笔刷颜色</span>
            <br>
            <input type="color">
            <br>
            <span>显示比例:%</span>
            <input type="number" value="100" max="200" min="10">

        </div>
        <div class="work">
            <div class="warp">
                <canvas id="canvas" width="800" height="600" >不支持canvas</canvas>
                <div class="cut_box"></div>
            </div>
            <!-- 调节层 -->
            <div class="alert">
                <!-- 调节窗口 -->
                <div class="color windows">
                    <h4>&nbsp;颜色调节<span>x</span></h4>
                    <div class="contr_color">
                        <h5>R: <input id="color_r" type="range" value="0" min="-255" max="255"></h5>
                        <h5>G: <input id="color_g" type="range" value="0" min="-255" max="255"></h5>
                        <h5>B: <input id="color_b" type="range" value="0" min="-255" max="255"></h5>
                        <h5>A: <input id="color_a" type="range" value="0" min="-255" max="255"></h5>
                    </div>
                    <div class="submit color_btn">
                        <a href="javacsript:;">取 消</a>
                        <a href="javacsript:;">确 定</a>
                    </div>
                </div>
                <!-- 保存窗口 -->
                <div class="save windows">
                    <h4>&nbsp;选择保存类型<span>x</span></h4>
                    <div class="contr_save">
                        <h5 class="contr_save_type">类型: <span title="常用格式,可压缩">JPEG<input name="image" type="radio" checked="checked"></span>
                            <span title="带透明通道">PNG<input name="image" type="radio" checked="checked"></span><span title="window常用图片">BMP<input name="image" type="radio"></span></h5>
                        <h5 class="contr_save_gre">质量: <input title="0.8" type="range" value="8" min="1" max="10" onchange="this.title=this.value/10"></h5>
                    </div>
                    <div class="submit save_btn">
                        <a href="javacsript:;">取 消</a>
                        <a href="javacsript:;">确 定</a>
                    </div>
                </div>
                <!-- 通用窗口 -->
                <div class="default windows">
                    <h4>&nbsp;<label for="">信息提示</label>:<span>x</span></h4>
                    <div class="default_cont">
                        <p>真的要这样吗?</p>
                    </div>
                    <div class="submit default_btn">
                        <a href="javacsript:;">取 消</a>
                        <a href="javacsript:;">确 定</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var c = document.querySelector('#canvas');
        var ct = c.getContext('2d');
        //创建PS对象
        var ps=new Ps(c);
    </script>
    <script src="ps/main.js"></script>
</body>
</html>